<script setup lang="ts">
import { ref } from 'vue'
import CustomNavBar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import type { BannerItem, CategoryItem, HotItem, LikeItem } from '@/types/home'
import type { XtxGuessInstance } from '@/types/component'
import PageSkeleton from './components/PageSkeleton.vue' // 骨架屏页面
import { useGuessList } from '@/composables'

const swiperList = ref<BannerItem[]>([])
const categoryList = ref<CategoryItem[]>([])
const hotList = ref<HotItem[]>([])
const guessList = ref<LikeItem[]>([])

// 封装函数请求轮播图数据
const getBannerList = async () => {
  const { result } = await getHomeBannerAPI()
  swiperList.value = result
  // console.log(swiperList.value)
}

// 封装函数请求分类数据
const getCategoryList = async () => {
  const { result } = await getHomeCategoryAPI()
  categoryList.value = result
  // console.log(categoryList.value)
}

// 封装函数请求热门商品数据
const getHotList = async () => {
  const { result } = await getHomeHotAPI()
  hotList.value = result
  // console.log(hotList.value)
}

/* // 页面滚动到底部事件
const guessRef = ref<XtxGuessInstance>()
const onScrolltolower = () => {
  // console.log('页面滚动到底部了')
  guessRef.value?.getMore()
} */
const { guessRef, onScrolltolower } = useGuessList()

// 关闭下拉刷新显示
const isTriggered = ref(false)
// 页面下拉刷新事件
const onRefresherRefresh = async () => {
  isTriggered.value = true
  // await getBannerList()
  // await getCategoryList()
  // await getHotList()
  // 1.先进行重置
  guessRef.value?.resetData()

  // 2.再进行获取
  await Promise.all([
    getBannerList(),
    getCategoryList(),
    getHotList(),
    guessRef.value?.getMore(),
  ]).then(() => {
    isTriggered.value = false
  })
}

// 页面滚动到顶部事件
const onPageScroll = () => {
  console.log('页面滚动到顶部了')
}

// 页面加载的时候
const isLoading = ref(false)
// 注意：onLoad 函数在页面加载的时候执行，只会执行一次
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getBannerList(), getCategoryList(), getHotList()]).then(() => {
    isLoading.value = false
  })
})

// 页面加载完成的时候
onLoad(() => {
  isLoading.value = false
})
</script>

<template>
  <!-- 头部 -->
  <CustomNavBar />
  <scroll-view
    refresher-enabled="true"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrolltolower"
    @refresherrefresh="onRefresherRefresh"
    class="scroll-view"
    scroll-y
  >
    <!-- 骨架屏 -->
    <PageSkeleton v-if="isLoading" />
    <template v-else>
      <!-- 轮播图 -->
      <XtxSwiper :list="swiperList" />
      <!-- 分类 -->
      <CategoryPanel :list="categoryList" />
      <!-- 热门推荐 -->
      <HotPanel :list="hotList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
</style>
